<template>
  <view class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 right-0 bg-white shadow shadow-shadow-md-md z-10">
      <view class="container mx-auto px-4 py-3 flex items-center justify-between">
        <view class="flex items-center">
          <text class="text-xl font-semibold text-primary">报表统计</text>
        </view>
        <view class="flex items-center space-x-4">
          <button class="p-2 text-gray-500 hover:text-primary transition-all duration-300" @click="showFilter">
            <text class="fa fa-filter text-lg"></text>
          </button>
          <button class="p-2 text-gray-500 hover:text-primary transition-all duration-300" @click="exportReport">
            <u-icon color="#1e88e5" name="attach"></u-icon>
          </button>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="container mx-auto px-4 pt-16 pb-24">
      <!-- 时间筛选 -->
      <view class="py-4">
        <view class="flex justify-between items-center bg-white rounded-lg shadow-card p-3">
          <view class="text-sm text-gray-500">
            <text>报表期间: </text>
            <text class="text-dark font-medium-medium">2024年10月01日-2024年10月31日</text>
          </view>
          <button class="text-sm text-primary flex items-center" @click="chooseDateRange">
            <text>选择</text>
            <text class="fa fa-calendar ml-1"></text>
          </button>
        </view>
      </view>

      <!-- 报表类型选择 -->
      <view class="py-4">
        <text class="text-sm font-medium text-gray-500 mb-3">报表类型</text>
        <view class="grid grid-cols-3 gap-3">
          <button class="bg-white rounded-lg shadow-card p-3 border-2 border-primary text-primary flex flex-col items-center justify-center" :class="{ 'border-primary text-primary': reportType === 'profit', 'border-gray-100 text-gray-700': reportType !== 'profit' }" @click="changeReportType('profit')">
            <text class="fa fa-line-chart text-xl mb-2"></text>
            <text class="text-sm font-medium">利润表</text>
          </button>
          <button class="bg-white rounded-lg shadow-card p-3 border-2 border-gray-100 text-gray-700 flex flex-col items-center justify-center" :class="{ 'border-primary text-primary': reportType === 'balance', 'border-gray-100 text-gray-700': reportType !== 'balance' }" @click="changeReportType('balance')">
            <text class="fa fa-balance-scale text-xl mb-2"></text>
            <text class="text-sm font-medium">资产负债表</text>
          </button>
          <button class="bg-white rounded-lg shadow-card p-3 border-2 border-gray-100 text-gray-700 flex flex-col items-center justify-center" :class="{ 'border-primary text-primary': reportType === 'cashflow', 'border-gray-100 text-gray-700': reportType !== 'cashflow' }" @click="changeReportType('cashflow')">
            <text class="fa fa-money text-xl mb-2"></text>
            <text class="text-sm font-medium">现金流量表</text>
          </button>
        </view>
      </view>

      <!-- 报表内容区 -->
      <view class="py-4">
        <view class="bg-white rounded-lg shadow-card p-4">
          <!-- 利润表 -->
          <view v-if="reportType === 'profit'">
            <view class="text-center mb-4">
              <text class="text-lg font-semibold">利润表</text>
              <view class="text-xs text-gray-500 mt-1">2024年10月01日-2024年10月31日</view>
            </view>
            
            <view class="border-b border-gray-200 pb-2 mb-2">
              <text class="text-base font-medium">一、营业收入</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">主营业务收入</text>
                <text class="text-sm font-medium">¥30,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">其他业务收入</text>
                <text class="text-sm font-medium">¥5,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">营业收入合计</text>
                <text class="text-sm font-semibold">¥35,000.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">二、营业成本</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">主营业务成本</text>
                <text class="text-sm font-medium">¥15,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">其他业务成本</text>
                <text class="text-sm font-medium">¥2,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">营业成本合计</text>
                <text class="text-sm font-semibold">¥17,000.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">三、营业利润</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">营业收入</text>
                <text class="text-sm font-medium">¥35,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：营业成本</text>
                <text class="text-sm font-medium">¥17,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：销售费用</text>
                <text class="text-sm font-medium">¥3,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：管理费用</text>
                <text class="text-sm font-medium">¥5,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：财务费用</text>
                <text class="text-sm font-medium">¥500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">营业利润</text>
                <text class="text-sm font-semibold text-primary">¥9,500.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">四、利润总额</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">营业利润</text>
                <text class="text-sm font-medium">¥9,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">加：营业外收入</text>
                <text class="text-sm font-medium">¥1,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：营业外支出</text>
                <text class="text-sm font-medium">¥500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">利润总额</text>
                <text class="text-sm font-semibold text-primary">¥10,000.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">五、净利润</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">利润总额</text>
                <text class="text-sm font-medium">¥10,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">减：所得税费用</text>
                <text class="text-sm font-medium">¥2,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">净利润</text>
                <text class="text-sm font-semibold text-primary">¥7,500.00</text>
              </view>
            </view>
          </view>
          
          <!-- 资产负债表 -->
          <view v-if="reportType === 'balance'">
            <view class="text-center mb-4">
              <text class="text-lg font-semibold">资产负债表</text>
              <view class="text-xs text-gray-500 mt-1">2024年10月31日</view>
            </view>
            
            <view class="grid grid-cols-2 gap-4">
              <!-- 资产 -->
              <view>
                <view class="text-center mb-4">
                  <text class="text-base font-semibold">资产</text>
                </view>
                
                <view class="border-b border-gray-200 pb-2 mb-2">
                  <text class="text-base font-medium">流动资产</text>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">货币资金</text>
                    <text class="text-sm font-medium">¥50,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">应收账款</text>
                    <text class="text-sm font-medium">¥20,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">存货</text>
                    <text class="text-sm font-medium">¥15,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">流动资产合计</text>
                    <text class="text-sm font-semibold">¥85,000.00</text>
                  </view>
                </view>
                
                <view class="border-b border-gray-200 py-2 mt-4 mb-2">
                  <text class="text-base font-medium">非流动资产</text>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">固定资产</text>
                    <text class="text-sm font-medium">¥100,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">累计折旧</text>
                    <text class="text-sm font-medium">-¥10,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">非流动资产合计</text>
                    <text class="text-sm font-semibold">¥90,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-3 border-b border-gray-100 bg-blue-50 mt-4">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">资产总计</text>
                    <text class="text-sm font-semibold text-primary">¥175,000.00</text>
                  </view>
                </view>
              </view>
              
              <!-- 负债和所有者权益 -->
              <view>
                <view class="text-center mb-4">
                  <text class="text-base font-semibold">负债和所有者权益</text>
                </view>
                
                <view class="border-b border-gray-200 pb-2 mb-2">
                  <text class="text-base font-medium">流动负债</text>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">应付账款</text>
                    <text class="text-sm font-medium">¥15,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">应付工资</text>
                    <text class="text-sm font-medium">¥8,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">应交税费</text>
                    <text class="text-sm font-medium">¥2,500.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">流动负债合计</text>
                    <text class="text-sm font-semibold">¥25,500.00</text>
                  </view>
                </view>
                
                <view class="border-b border-gray-200 py-2 mt-4 mb-2">
                  <text class="text-base font-medium">所有者权益</text>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">实收资本</text>
                    <text class="text-sm font-medium">¥100,000.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100">
                  <view class="flex justify-between">
                    <text class="text-sm">未分配利润</text>
                    <text class="text-sm font-medium">¥49,500.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">所有者权益合计</text>
                    <text class="text-sm font-semibold">¥149,500.00</text>
                  </view>
                </view>
                
                <view class="pl-4 py-3 border-b border-gray-100 bg-blue-50 mt-4">
                  <view class="flex justify-between">
                    <text class="text-sm font-medium">负债和所有者权益总计</text>
                    <text class="text-sm font-semibold text-primary">¥175,000.00</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 现金流量表 -->
          <view v-if="reportType === 'cashflow'">
            <view class="text-center mb-4">
              <text class="text-lg font-semibold">现金流量表</text>
              <view class="text-xs text-gray-500 mt-1">2024年10月01日-2024年10月31日</view>
            </view>
            
            <view class="border-b border-gray-200 pb-2 mb-2">
              <text class="text-base font-medium">一、经营活动产生的现金流量</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">销售商品、提供劳务收到的现金</text>
                <text class="text-sm font-medium">¥35,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">收到的其他与经营活动有关的现金</text>
                <text class="text-sm font-medium">¥1,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">经营活动现金流入小计</text>
                <text class="text-sm font-semibold">¥36,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">购买商品、接受劳务支付的现金</text>
                <text class="text-sm font-medium">¥17,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">支付给职工以及为职工支付的现金</text>
                <text class="text-sm font-medium">¥8,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">支付的各项税费</text>
                <text class="text-sm font-medium">¥2,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">支付的其他与经营活动有关的现金</text>
                <text class="text-sm font-medium">¥8,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">经营活动现金流出小计</text>
                <text class="text-sm font-semibold">¥35,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">经营活动产生的现金流量净额</text>
                <text class="text-sm font-semibold text-primary">¥500.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">二、投资活动产生的现金流量</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">购建固定资产、无形资产和其他长期资产支付的现金</text>
                <text class="text-sm font-medium">¥20,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">投资活动现金流出小计</text>
                <text class="text-sm font-semibold">¥20,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">投资活动产生的现金流量净额</text>
                <text class="text-sm font-semibold text-danger">-¥20,000.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">三、筹资活动产生的现金流量</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm">吸收投资收到的现金</text>
                <text class="text-sm font-medium">¥50,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100">
              <view class="flex justify-between">
                <text class="text-sm font-medium">筹资活动现金流入小计</text>
                <text class="text-sm font-semibold">¥50,000.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-gray-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">筹资活动产生的现金流量净额</text>
                <text class="text-sm font-semibold text-primary">¥50,000.00</text>
              </view>
            </view>
            
            <view class="border-b border-gray-200 py-2 mt-4 mb-2">
              <text class="text-base font-medium">四、现金及现金等价物净增加额</text>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-blue-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">现金及现金等价物净增加额</text>
                <text class="text-sm font-semibold text-primary">¥30,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 mt-4">
              <view class="flex justify-between">
                <text class="text-sm font-medium">期初现金及现金等价物余额</text>
                <text class="text-sm font-semibold">¥19,500.00</text>
              </view>
            </view>
            
            <view class="pl-4 py-2 border-b border-gray-100 bg-blue-50">
              <view class="flex justify-between">
                <text class="text-sm font-medium">期末现金及现金等价物余额</text>
                <text class="text-sm font-semibold text-primary">¥50,000.00</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 数据分析 -->
      <view class="py-4" v-if="reportType === 'profit'">
        <text class="text-sm font-medium text-gray-500 mb-3">数据分析</text>
        <view class="grid grid-cols-2 gap-3">
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">毛利率</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">51.4%</text>
              <text class="text-xs text-secondary ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>2.3%
              </text>
            </view>
          </view>
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">净利率</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">21.4%</text>
              <text class="text-xs text-secondary ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>1.5%
              </text>
            </view>
          </view>
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">费用率</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">24.3%</text>
              <text class="text-xs text-danger ml-2 flex items-center">
                <text class="fa fa-arrow-up mr-1"></text>0.8%
              </text>
            </view>
          </view>
          <view class="bg-white rounded-lg shadow-card p-4">
            <text class="text-xs text-gray-500 mb-1">税负率</text>
            <view class="flex items-end">
              <text class="text-xl font-semibold">7.1%</text>
              <text class="text-xs text-gray-500 ml-2 flex items-center">
                <text class="fa fa-minus mr-1"></text>0.2%
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reportType: 'profit',
      filterVisible: false
    };
  },
  onLoad() {
    console.log('报表页面加载完成');
  },
  methods: {
    // 切换报表类型
    changeReportType(type) {
      this.reportType = type;
    },
    
    // 选择日期范围
    chooseDateRange() {
      uni.showDatePicker({
        startDate: '2024-01-01',
        endDate: '2024-12-31',
        success: (res) => {
          console.log('选择的日期:', res);
          // 这里可以处理日期选择逻辑
        }
      });
    },
    
    // 显示筛选
    showFilter() {
      this.filterVisible = true;
      // 这里可以实现底部弹出筛选面板的逻辑
      uni.showActionSheet({
        itemList: ['按部门筛选', '按项目筛选', '按时间筛选', '自定义筛选'],
        success: (res) => {
          console.log('选择的筛选条件:', res.tapIndex);
          // 这里可以处理筛选逻辑
        }
      });
    },
    
    // 导出报表
    exportReport() {
      uni.showToast({
        title: '报表导出成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
/* 引入全局样式 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 自定义样式 */
.container {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
}

.shadow-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bg-primary {
  background-color: #1E88E5;
}

.text-primary {
  color: #1E88E5;
}

.bg-primary-light {
  background-color: #E3F2FD;
}

.bg-secondary {
  background-color: #4CAF50;
}

.text-secondary {
  color: #4CAF50;
}

.bg-secondary-light {
  background-color: #E8F5E9;
}

.bg-danger {
  background-color: #F44336;
}

.text-danger {
  color: #F44336;
}

.bg-warning {
  background-color: #FF9800;
}

.text-warning {
  color: #FF9800;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}
</style>
